<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="header" style=" position: fixed,top:0">
			<!-- 定位城市 -->
			<view class="addr">
				<view class="cuIcon-locationfill text-red"></view>
				{{city.name}}
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" />
				<view class="icon search"></view>
			</view>

		</view>

		<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor"
		 :menuList="menuList" @result="result"></sl-filter>

		<view class="uni-common-mt">
			<view>
				<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="covers" @callouttap="callouttap"
				 @markertap="callouttap">
				</map>
			</view>
		</view>

		<view class="cu-load load-modal" v-if="isLoading">
			<view class="cuIcon-emojifill text-orange"></view>
			<view class="gray-text">{{loadMoreDefalutText}}</view>
		</view>
	</view>
</template>
<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';

	export default {
		components: {
			slFilter
		},
		data() {
			return {
				title: 'map',
				isLoading: false,
				latitude: 0, //30.658588,
				longitude: 0, // 104.066277,
				covers: [],
				scale: 13,
				city:{
					id:1,
					name:'成都市'
				},
				showType: "Area",
				themeColor: '#D1372C',
				titleColor: '#666666',
				queryParams: {
					query: '',
					Area: '',
					HouseType: '',
					HousePrice: '',
					Latitude: null,
					Longitude: null,
					houseAreaId: null,
					Distance: 2
				},
				menuList: [
					// {
					// 	'title': '区域',
					// 	'key': 'Area',
					// 	'isSort': true,
					// 	'reflexTitle': true,
					// 	'defaultSelectedIndex': 0,
					// 	'detailList': [{
					// 		'title': '区域',
					// 		'value': ''
					// 	}]
					// },
					{
						'title': '价格',
						'key': 'HousePrice',
						'isSort': false,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
							'title': '不限',
							'value': ''
						}]
					},
					{
						'title': '业态',
						'key': 'HouseType',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
							'title': '业态',
							'value': ''
						}]
					}
				]
			}
		},
		onLoad(e) {
			this.queryParams.Latitude = this.latitude = e.lat;
			this.queryParams.Longitude = this.longitude = e.lng;
			if (this.city.id != getApp().globalData.city.id) {
				this.city = getApp().globalData.city;
				//this.queryParams.CityId = this.city.id;
			}
			this.loadSelectList();
			this.loadMapInfo();

		},
		methods: {
			result(val) {
				this.queryParams.HousePrice = val.HousePrice;
				this.queryParams.Area = val.Area;
				this.queryParams.HouseType = val.HouseType;
				this.covers = [],
					this.loadMapInfo();
			},
			// 重置所有选项，包括默认选项，并更新result
			resetAllSelect() {
				this.$refs.slFilter.resetAllSelect(function(result) {
					console.log('重置之后回调的result:' + JSON.stringify(result))
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/new/detail/detail'
				})
			},
			// 点击气泡
			callouttap(e) {
				if (e.markerId != 1) {
					uni.navigateTo({
						url: '/pages/new/detail/detail?id=' + e.markerId
					})
				}

			},
			loadMapInfo() {
				var me = this;
				me.isLoading = true;
				uni.request({
					url: me.$rootUrl + '/House/GetHosueMapList',
					data: me.queryParams,
					method: 'GET',
					success(res) {
						me.isLoading = false;
						if (res.data.success) {
							me.covers = res.data.items;
							var cover = {
								id: 1,
								latitude: me.latitude,
								longitude: me.longitude,
								iconPath: '/static/img/location.png'
							}
							me.covers.push(cover);
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});


			},
			loadSelectList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Dic/GetNewDicList',
					data: {
						cityId:this.city.id
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							//me.menuList[0].detailList = me.menuList[0].detailList.concat(res.data.areas);
							me.menuList[0].detailList = res.data.prices;
							me.menuList[1].detailList = res.data.type;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},


		}
	}
</script>

<style lang="scss">
	.content {

		.header {
			width: 100%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			/* #ifdef H5 */

			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 10;
			background-color: #fff;

			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */

			.addr {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 28upx;

				.icon {
					height: 60upx;
					margin-right: 5upx;
					display: flex;
					align-items: center;
					font-size: 42upx;
					color: #ffc50a;
				}
			}

			.input-box {
				width: 100%;
				height: 60upx;
				background-color: #f5f5f5;
				border-radius: 30upx;
				position: relative;
				display: flex;
				align-items: center;

				.icon {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 60upx;
					font-size: 34upx;
					color: #c0c0c0;
				}

				input {
					padding-left: 28upx;
					height: 28upx;
					font-size: 28upx;
				}
			}

			.icon-btn {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;

				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 42upx;
				}
			}
		}

		.list {
			margin-top: 48px;

		}

		.uni-common-mt {
			map {
				width: 100%;
				height: 1200upx;
			}
		}
	}

	.text {
		margin-top: 50px;
		margin-left: 20px;
		width: 100%;
	}
</style>
